<template>
    <div class="home" style="z-index: 1">

        <!--轮播-->
        <van-swipe :autoplay="3000" indicator-color="white" class="my-swipe" @click="toAdvertisement">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img v-lazy="image"   class="swipe-picture" />
            </van-swipe-item>
        </van-swipe>


        <!--格子-->
        <van-cell title="商品类别" is-link url="" class="hot" value="更多商品" @click="toShop()"></van-cell>
        <van-grid :column-num="4">
            <van-grid-item
                    v-for="category in category1"
                    :key="category"
                    :text="category.name"
                    :icon="category.img"
                    v-on:click="toSearchGoods(category.key)"
            >

            </van-grid-item>
        </van-grid>

        <!--热门帖子卡片-->
        <van-cell title="热门帖子" is-link url="" class="home-hot-post-list" value="更多" v-on:click="toPost()"></van-cell>

        <van-list>
            <template>

                <div class="hot-post-item" v-for="hotpost in hotposts" :key="hotpost" >

                    <div class="hot-post-item-head">

                        <img :src="hotpost.userHeader" class="hot-post-item-header">
                        <div class="content" v-on:click="toPostDetails(hotpost.id)">
                            <p class="post-author">{{hotpost.userName}}</p>
                            <p class="post-title">{{hotpost.title}}</p>
                        </div>
                    </div>


                    <div class="hot-post-text" v-on:click="toPostDetails(hotpost.id)">
                        <div class="van-multi-ellipsis--l3">
                            <p class="hot-post-text-text">{{hotpost.text}}</p>
                        </div>
                    </div>
                </div>
            </template>
        </van-list>

        <i class="font-face"> </i>
    </div>
</template>

<script>
    import {ref} from 'vue';
    import {Toast} from 'vant';
    import Vue from 'vue';

    import {ApiService} from "../../axios/apiService";
    import { Search } from 'vant';
    import { Lazyload } from 'vant';

    Vue.use(Lazyload);
    Vue.use(Toast)
    Vue.use(Search);

    export const home = new ApiService('/home')
    const hotPostMessage =new ApiService("/hotPost");/*获取热门帖子*/



    export default {
        setup() {
            const value = ref('');
            const onSearch = (val) => Toast(val);
            const onCancel = () => Toast('取消');

            return {
                toPostDetails:"toPostDetails",
                value,
                onSearch,
                onCancel,

            };
        },
        props: {},
        data() {
            return {

                bannerImages: [],
                images: [
                    'http://jingzai-pethome.oss-cn-chengdu.aliyuncs.com/img/1622104492558.jpg',
                    'http://jingzai-pethome.oss-cn-chengdu.aliyuncs.com/img/1622105525047.jpg',
                    'http://jingzai-pethome.oss-cn-chengdu.aliyuncs.com/img/1622105604214.jpg',

                ],
                hotposts: [],

                category1: [
                    /*{
                        name: "猫砂",
                        img: "https://img14.360buyimg.com/n5/jfs/t1/108276/6/2850/189962/5e0b0281E63ed88b7/8a747d1b7db844a4.jpg",
                        icon: ""
                    }, */{
                        name: "笼子围栏",
                        key:"笼",/*用于搜索*/
                        img: "https://img12.360buyimg.com/n5/jfs/t1/52989/2/12093/134161/5d8ed4b1E687685a5/c48fdc1de6788fb2.jpg"
                    },
                    {
                        name: "美容电器",
                        key:"美",
                        img: "https://img12.360buyimg.com/n5/jfs/t1/149509/31/19595/93992/5fe47c3dEa44472aa/ae7e2ba547f056d5.jpg"
                    }/*, {
                        name: "宠物浴液",
                        img: "https://img10.360buyimg.com/n5/jfs/t1/168644/27/15078/138515/605ec63eE06ad66ac/e4cc5e9a62674635.jpg"
                    }*/,/* {
                        name: "牵引绳",
                        img: "https://img11.360buyimg.com/n5/jfs/t1/79209/31/6859/194213/5d4f762fE355c67e6/7138f41b20036d84.jpg"
                    },*//* {
                        name: "猫狗窝",
                        img: "https://img12.360buyimg.com/n5/jfs/t1/164877/30/12815/127988/6051c704E9a28d069/5bb0d378090dab3d.jpg"
                    },*/ {
                        name: "益智玩具",
                        key:"玩",
                        img: "https://img14.360buyimg.com/n5/jfs/t1/90201/15/14739/127794/5e6adffbE9ff1a08b/f4a8791751b1d7b2.jpg"
                    }, {
                        name: "宠物驱虫",
                        key:"药",
                        img: "https://img13.360buyimg.com/n5/jfs/t1/173950/21/964/102963/60617396E189a3333/cb670780986c6aef.jpg"
                    }],
            };
        },
        mounted() {
            this.getBannnerImage()
            this.getIteams()
            console.log('初始化数据')
            this.getPostMessage()
        },
        methods: {
            toAdvertisement(event){
//TODO 这里跳转无法实现
                console.log("点击轮播图")
                console.log("点击轮播图"+event)
               /* if(index==1){
                    const goodsId = 42
                    console.log(goodsId)
                    this.$router.push({name: "goodsDetail",params:goodsId})
                }*/
            },
            toSearchGoods(keyValue){//跳转到搜索界面，搜索值为 keyValue
              console.log("keyValue :"+keyValue)
                this.$router.push({name: "shop",params:{keyValue:keyValue}})
            },
            onSubmit(){
                //在这里和后端交互
                console.log(this.Usercomment);
            },
            getPostMessage(){
                hotPostMessage.getViewList().then(res=>{
                    this.hotposts = res.data;
                })
            },

            toShop(){
                this.$router.push({name: "shop"})
            },
            toPost(){
                this.$router.push({name: "post"})
            },
            toPostDetails(postId) {
                console.log("postID: "+postId);
                this.$router.push({name: "post-details",params:{postId:postId}})
            },
            getBannnerImage() {
                home.list('imgaes').then(res => {
                    console.log(res);
                })
            },
            getIteams() {
                home.list('iteams').then(res => {
                    console.log(res);
                })
            },
            moreCategory() {
                this.$router.push("category")
            }
        }
    };
</script>
<style>
    .hot-post-item-header{
        width: 2.5rem;
        height: 2.5rem;
        border-radius:2.5rem;
    }
    .swipe-picture{
        width: 100%;
        height: auto;
        max-width: 146%;
        height: auto;
        text-align: center;
    }
    .position-fixed{
        position:fixed;
    }
    .hot-post-item-botton {
        display: flex;
        margin: auto;
        size: auto;

    }

    hot-post-item-botton-img-icon {
        height: 20px;
    }

    .hot-post-item-head {
        display: flex;

    }

    .hot-post-text-text {
        margin: auto;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 3px;
    }

    .hot-post-text {
        margin: auto;
    }

    .post-title {
        color: black;
        font-size: 16px;
        margin: auto;
        font-weight: 700;
    }

    .hot-post-item {
        margin-bottom: 10px;
        display: block;
        table-layout: auto;
        background: white;
    }

    .post-author {
        margin-left: 3px;
        margin-top: auto;
        color: saddlebrown;
        font-size: 20px;
        margin-bottom: auto;
    }

    .home-hot-post-header {
        width: 10px;
        height: 10px;
    }

    .my-swipe .van-swipe-item {
        color: #ffffff;
        font-size: 20px;
        width: 100vm;
        height: 20vh;
        vertical-align: middle;
        text-align: center;
        background-color: #39a9ed;
    }

    .home-hot-post-img {
        width: 140vw;
        height: 14vh;
        margin-top: auto;
        margin-bottom: auto;
    }

    .book-item {
        display: flex;
        height: 20vh;
        width: 100vw;
        background: white
    }

    .book-author {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical
    }

    .book-gist {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical
    }

    .van-icon__image {
        width: 5em;
        height: 3em;
        object-fit: contain;
    }
</style>
